<template>
	<view class="container allhw-vh  animation-slide-right" v-if="userInfo && userInfo.accountNum">
		<view class="top-container ">
			<image class="bg-img" src="https://cdn.quasar.dev/img/mountains.jpg"></image>
			<!-- <view class="heard"><text>我</text></view> -->
			<view class="item-nav" v-if="showBack">
				<view class="float-left"><tui-icon @click="backToUp" name="arrowleft" color="grey" size="25"></tui-icon></view>
				<!-- <view class="float-right"><tui-icon name="setup-fill" color="grey" size="25"></tui-icon></view> -->
			</view>
			<view class="user-wrapper">
				<view class="tui-flex">
					<view class="tui-col-1 " />
					<image class="avatar-img tui-col-4" src="https://cdn.quasar.dev/img/avatar.png"></image>
					<view class="tui-col-1 " />
					<view class="tui-col-6 im-user-card">
						<im-cell title="昵称:" :text="userInfo.name" />
						<im-cell @comitAction="editeNickNameFun" title="备注:" :text="userInfo.nickName" rightIcon="edit" />
						<im-cell title="账号:" :text="userInfo.accountNum" />
						<im-cell title="地区:" :text="userInfo.location" />
					</view>
				</view>
			</view>
		</view>
		<view class="main-container">
			<scroll-view scroll-y class="user-info">
				<tui-list-view title="申请记录" v-if="agree_model">
					<tui-list-cell :arrow="false">
						<view class="tui-item-box tui-flex">
							<view class="tui-col-3 text-cut text-green"><text class="tui-list-cell_name margin-left">测试数据:</text></view>
							<view class="tui-col-9 text-breakWord">你好啊，我是***</view>
						</view>
					</tui-list-cell>
				</tui-list-view>
				<tui-list-view title="个人资料" v-else>
					<tui-list-cell  :arrow="false">
						<view class="tui-item-box tui-flex">
							<view class="tui-col-4">
								<tui-icon name="mobile" :size="15" color="#000000"></tui-icon>
								<text class="tui-list-cell_name margin-left">电话号码</text>
							</view>
							<view class="tui-col-8">{{ userInfo.phone }}</view>
						</view>
					</tui-list-cell>
					<tui-list-cell  :arrow="true">
						<view class="tui-item-box">
							<view class="tui-col-4">
								<tui-icon name="card" :size="15" color="#388aed"></tui-icon>
								<text class="tui-list-cell_name margin-left">标签</text>
							</view>
							<view class="tui-col-8">{{ userInfo.tag }}</view>
						</view>
					</tui-list-cell>
					<tui-list-cell :arrow="true">
						<view class="tui-item-box">
							<view class="tui-col-4">
								<tui-icon name="edit" :size="15" color="#388aed"></tui-icon>
								<text class="tui-list-cell_name margin-left">签名</text>
							</view>
							<view class="tui-col-8">{{ userInfo.remak }}</view>
						</view>
					</tui-list-cell>
				</tui-list-view>
			</scroll-view>
		</view>
		<view class="shq-container" v-if="!agree_model">
			<tui-list-view title="生活圈">
				<tui-list-cell @click="detail" :arrow="true" v-if="userInfo.shqPic && userInfo.shqPic.length > 0">
					<view class="tui-item-box tui-flex">
						<view class="tui-align-right "><tui-image-group :imageList="userInfo.shqPic" isGroup width="60rpx" height="60rpx"></tui-image-group></view>
					</view>
				</tui-list-cell>
				<view v-else class="im-user-shq-nodata tui-flex tui-center">无数据</view>
			</tui-list-view>
		</view>
		<!-- 非好友状态下操作 -->
		<view class="reqRemark-item tui-flex" v-if="agree_model">
			<tui-list-view>
				<tui-list-cell :arrow="false"><textarea style="height: 100rpx;" @input="inputAgreeMsg" :value="feedBackMsg" placeholder="回复" :maxlength="120" /></tui-list-cell>
				<tui-list-cell :arrow="false">
					<text :class="feedBackMsg.length === 120?'text-red':''">{{ feedBackMsg.length }}/120</text> 
				</tui-list-cell>
			</tui-list-view>
		</view>
		<view class="foot-container tui-flex tui-center" v-if="agree_model">
			<view class="  im-user-action-item tui-col-3"><tui-button type="primary">同意</tui-button></view>
			<view class=" im-user-action-item tui-col-3"><tui-button type="warning">拒绝</tui-button></view>
		</view>
		<view class="foot-container tui-flex tui-center" v-else-if="userInfo.friendFlag == ImEnum_OtherEnum.OtherEnum.FRIEND_TYPE.UN_KONW">
			<view @click="toAddFriendFu" class="im-user-action-item tui-col-3"><tui-button type="green">加好友</tui-button></view>
		</view>
		<view class="foot-container tui-flex tui-center" v-else>
			<view class="  im-user-action-item tui-col-3"><tui-button type="primary">发信息</tui-button></view>
			<view class=" im-user-action-item tui-col-3"><tui-button type="warning">权限</tui-button></view>
			<view v-if="userInfo.blackUser == 1" class="  im-user-action-item tui-col-3"><tui-button type="green">移出黑名单</tui-button></view>
			<view v-else class="  im-user-action-item tui-col-3"><tui-button type="danger">移入黑名单</tui-button></view>
		</view>
	</view>
</template>

<script>
import ImEnum from '../../../sdk/enums/index.js';
export default {
	name: 'friendInfo',
	props: {
		showBack: {
			type: Boolean,
			default: false
		},
		agree_model: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			ImEnum_OtherEnum: {},
			navbarText: '资料',
			userAccountNum: '',
			feedBackMsg: '',
			userInfo: {}
		};
	},
	created() {
		this.ImEnum_OtherEnum = ImEnum;
	},
	methods: {
		toAddFriendFu() {
			uni.navigateTo({
				url: '/pages/contacts/friend/reqAddFriend'
			})();
		},
		inputAgreeMsg(e) {
			this.feedBackMsg = e.detail.value;
		},
		backToUp() {
			uni.navigateBack();
		},
		editeNickNameFun() {
			console.log('editeNickNameFun------------');
		},
		getUserInfo() {
			debugger;
			this.userInfo = this.BenderSdk.UserApi.getUserInfByAccountNum(this.userAccountNum);
			if (this.userInfo) {
				this.$emit('getInfoSuccessBack', this.userInfo);
			}
		},
		setAccountNum(e) {
			this.userAccountNum = e;
			this.getUserInfo();
		}
	}
};
</script>

<style scoped>
.container {
	background-color: #8080803d;
}
.top-container {
	height: 500rpx;
	position: relative;
	display: flex;
	flex-direction: column;
}
.user-wrapper {
	margin-top: 100rpx;
	margin-left: 2%;
	position: relative;
	width: calc(96% - 40rpx);
	height: 280rpx;
	background-color: #ffffff8c;
	border-radius: 3%;
	padding: 20rpx;
}
.main-container {
	margin-top: -50rpx;
	margin-left: 2%;
	height: 400rpx;
	width: 96%;
	background-color: white;
	position: relative;
	border-radius: 1%;
}
.shq-container {
	margin-top: 20rpx;
	margin-left: 2%;
	height: 200rpx;
	width: 96%;
	background-color: white;
	position: relative;
	border-radius: 1%;
}
.foot-container {
	margin-top: 20rpx;
	margin-left: 2%;
	min-height: 150rpx;
	width: 96%;
	position: relative;
	border-radius: 1%;
}
.im-user-action-item {
	margin: 5rpx;
}
.item-nav {
	margin-top: 20rpx;
	width: 100%;
	position: fixed;
	z-index: 9999;
}

.bg-img {
	position: absolute;
	width: 100%;
	height: 500rpx;
}

.user {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
}
.user-info {
	height: 100%;
}
.avatar-img {
	width: 160rpx;
	height: 160rpx;
	line-height: 160rpx;
	border-radius: 50%;
	align-self: center;
}
.tui-ml-auto {
	margin-left: auto;
}
.tui-item-box {
	width: 100%;
	display: flex;
	align-items: center;
}
.im-user-card {
	margin-top: 20rpx;
}
.im-user-shq-nodata {
	font-size: 30rpx;
}
.reqRemark-item {
	position: relative;
	height: 200rpx;
	width: 96%;
	margin: 2%;
}

</style>
